<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 3000px;
        }

        .lift {
            position: fixed;
            right: 20px;
            display: none;
            width: 50px;
            height: 205px;
        }

        .box {
            width: 50px;
            height: 50px;
            border: 1px solid pink;
        }

        .add {
            background-color: pink;
        }

        .font {
            font-size: 16px;
        }

        .boss {

            height: 3000px;
            /* background-color: skyblue; */
        }

        .wei_shui {
            text-align: center;
            position: relative;
            top: 300px;
            background-color: pink;
        }

        .wei_shi {
            text-align: center;
            position: relative;
            top: 600px;
            background-color: pink;
        }

        .wei_fu {
            text-align: center;
            position: relative;
            top: 800px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="boss">
        <div class="top_box">顶部</div>
        <div class="wei_shui">水果</div>
        <div class="wei_shi">食品</div>
        <div class="wei_fu">服装</div>
        <div class="lift">
            <div data-name="shui" class="box font">水果</div>
            <div data-name="shi" class="box font">食品</div>
            <div data-name="fu" class="box font">服装</div>
            <div class="top_box box">顶部</div>
        </div>
    </div>

    <script>
        (function () {
            //设置滑动事件，让lift盒子在300px距离显现
            const lift = document.querySelector('.lift');
            console.log(lift);

            window.addEventListener('scroll', function () {
                // console.log(document.documentElement.scrollTop);
                const num = document.documentElement.scrollTop;
                console.log(num);
                // if (num >= 300) {
                //     console.log('大于300');
                //     lift.style.display = 'block';
                //     console.log(lift);
                // } else {
                //     lift.style.display = 'none';
                // }
                // 三目运算符
                lift.style.display = num >= 300 ? 'block' : 'none';
                //获取盒子显示的距离
                //当scrollTop等于显示距离
                //获取当前距离的盒子添加add类名



            })
            //设置盒子定位
            //利用事件委托给小box添加点击事件
            //给小box添加data-类名，写上对应的scrollTop距离
            //大功告成
            lift.addEventListener('click', function (e) {
                //当前被点击的子元素
                console.log(e.target);
                //利用e.target.tagName限制点击的元素
                if (e.target.tagName === 'DIV' && e.target.dataset.name) {
                    //dataset.id 拿到box的data-id的值
                    // console.log(e.target.dataset.id);
                    //拿到小盒子类名，
                    const num1 = e.target.dataset.name;
                    console.log(num1);
                    //根据类名拿到对应大盒子的位置
                    //将值赋给scrollTop
                    let top = document.documentElement.scrollTop = document.querySelector(`.wei_${num1}`).offsetTop;

                    //点击小盒子要有红色背景 使用classList更好
                    //利用css选择器找到有add类名的元素 remove删除

                    //解决第一次没有类名的问题
                    //获取add类名 没有返回null就不移除add类名，有就移除 
                    //用if判断是否有类名add
                    const fist = document.querySelector('.lift .add');
                    console.log(fist);
                    if (fist) fist.classList.remove('add');
                    e.target.classList.add('add');
                }
                console.log(e.target.class.name === 'top_box');
                // if (e.target.class.name === 'top_box') {
                //     document.documentElement.scrollTop = 0;
                // }
            })
        })();
    </script>
</body>

</html>